// 函数式组件的改写

import { createVNode, render } from 'vue'
import MessageComponent from './index.vue'

function Message ({ type, text }) {
  // 核心逻辑
  // 1. 以Message组件为基础生成一个VNode
  // 2. 准备一个挂载我们组件的节点元素出来(body -> id Container)
  // 3. 使用render函数渲染到某个节点中
  const MVNode = createVNode(MessageComponent, { text, type })
  const container = document.createElement('div')
  document.body.appendChild(container)
  render(MVNode, container)

  // 1500之后消失
  setTimeout(() => {
    render(null, container)
  }, 1500)
}

export default Message
